{% stylesheet %}
.top-notice {
  display: block;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  overflow: hidden;
}

.header_box {
  position: relative;
}

.header_box .header-nav {
  background-color: var(--bg-color);
  display: flex;
  position: relative;
}

@media screen and (min-width: 767px) and (max-width: 1400px) {
  .header_box .header-nav {
    padding: 0 30px;
  }
}

.header_box .header-nav .header-nav-container {
  color: var(--font-color);
  max-width: var(--general_layout_width);
  margin: 0 auto;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-nav-container {
    padding: 0 15px;
  }
}

.header_box .header-nav .header-nav-left,
.header_box .header-nav .mobile-menu-icon,
.header_box .header-nav .mobile-menu-icon,
.header_box .header-nav .header-nav-content,
.header_box .header-nav .header-nav-right {
  height: 90px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-nav-left,
  .header_box .header-nav .mobile-menu-icon,
  .header_box .header-nav .mobile-menu-icon,
  .header_box .header-nav .header-nav-content,
  .header_box .header-nav .header-nav-right {
    height: 60px;
  }
}

.header_box .header-nav .mobile-menu-icon,
.header_box .header-nav .mobile-search {
  display: none;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .mobile-menu-icon,
  .header_box .header-nav .mobile-search {
    display: flex;
  }
}

.header_box .header-nav .header-logo {
  font-size: 22px;
  line-height: 22px;
  font-weight: bold;
  max-height: 100%;
  display: inline-flex;
  align-items: center;
  color: var(--font-color);
  margin: 0 12px;
}

.header_box .header-nav .header-logo img {
  width: auto;
  height: 60px;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.header_box .header-nav .header-nav-content {
  flex: 1;
  justify-content: center;
}

.header_box .header-nav .header-menu {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
}

.header_box .header-nav .header-menu .logo-left {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header_box .header-nav .header-menu .logo-right {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: start;
}

.header_box .header-nav .header-menu .header-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.header_box .header-nav .header-menu .header-nav-item:hover .parent-level-ul {
  display: block;
}

.header_box .header-nav .header-menu .nav-child-el {
  line-height: 1.8;
}

.header_box .header-nav .currency_box {
  height: 100%;
  position: relative;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .currency_box {
    display: none;
  }
}

.header_box .header-nav .currency_box .currency_txt {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.header_box .header-nav .currency_box .currency_txt span {
  margin-right: 5px;
}

@media screen and (max-width: 767px) {
  .header_box .header-nav .member-icon {
    display: none;
  }
}

.header_box .header-nav .header-nav-icon {
  cursor: pointer;
}

.header_box .header-nav .header-nav-icon path {
  fill: var(--font-color);
}

.header_box .header-nav .cart-box {
  position: relative;
}

.header_box .header-nav .cart-box span {
  min-width: 20px;
  height: 20px;
  background: #f00b0b;
  display: none;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -20px;
}

.header_box .parent-level-ul {
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  padding: 50px 0;
  display: none;
  z-index: 200;
}

.header_box .parent-level-ul::after {
  height: 1px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--font-color);
  opacity: 0.2;
  content: "";
  z-index: 300;
}

.header_box .parent-level-ul .sub-menu {
  display: flex;
  justify-content: center;
  max-width: var(--general_layout_width);
  margin: 0 auto;
}

.header_box .parent-level-ul .sub-menu .sub-menu-item {
  max-width: 20%;
  text-align: left;
  padding: 0 24px;
  margin-top: 25px;
}

.header_box .parent-level-ul .sub-menu .header-nav-item-parent {
  display: block;
}

.header_box .parent-level-ul .sub-menu .nav-child-a {
  font-weight: 600;
  font-size: 14px;
}

.header_box .parent-level-ul .secondary-ul {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  width: 100%;
}

.header_box .parent-level-ul .secondary-ul .secondary-ul-item {
  width: 100%;
  text-align: left;
}

.pop_search-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000022;
  z-index: 500100;
  opacity: 0;
  width: 0;
  height: 0;
  transition: opacity 0.45s ease-in-out;
}

.pop_search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500200;
  transform: translateY(-100%);
  transition: all 0.45s ease-in-out;
}

.pop_search .pop_search-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.pop_search .pop_search-header {
  display: flex;
  padding: 24px 0;
  justify-content: flex-end;
}

.pop_search .header-nav-search {
  padding: 35px 0;
}

.search-input {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid var(--font-color);
  box-sizing: border-box;
  width: 100%;
}

.search-input .search-mobile-input {
  flex: 1;
  outline: none;
  font-size: 24px;
}

.search-input svg {
  stroke: #868686;
}

.mobile-search-input {
  padding: 10px 0;
  margin-bottom: 15px;
}

.mobile-search-input .search-mobile-input {
  font-size: 14px;
}

.mobile-search-input svg {
  width: 18px;
  height: 18px;
}

.mask-show {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.pop_search-show {
  transform: translateY(0);
}

.fullscreen-menu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  z-index: 500100;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu {
    flex-direction: column;
  }
}

.fullscreen-menu .bar-light {
  background-color: #f8f8f8;
  padding: 14px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .bar-light {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
  }
}

.fullscreen-menu .bar-light .user-icon {
  display: inline-flex;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .bar-light .user-icon {
    padding: 0;
  }
}

.fullscreen-menu .bar-light .del_btn {
  background-color: #fff;
}

.fullscreen-menu .bar-light path {
  fill: #777;
}

.fullscreen-menu .side-panel-content {
  position: relative;
  padding: 35px;
  flex: 1;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .side-panel-content {
    padding: 15px;
  }
}

.fullscreen-menu .side-panel-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fullscreen-menu .panel-menu-ul {
  width: 25%;
  position: relative;
  padding: 0 5px;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .panel-menu-ul {
    width: 100%;
    padding: 0;
  }
}

.fullscreen-menu .panel-menu-ul .panel-menu-ul {
  display: none;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item {
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item:hover .et-menu-toggle {
  background-color: #e8e8e8;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .panel-menu-ul .panel-menu-item:hover .et-menu-toggle {
    background-color: #fff;
  }
}

.fullscreen-menu .panel-menu-ul .panel-menu-item:hover .panel-navigation::before {
  width: 100%;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item:hover .sub-menu {
  display: flex;
  flex-wrap: wrap;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item .sub-menu {
  border: 0;
  position: absolute;
  width: 60vw;
  left: 100%;
  top: 0;
  min-height: 50vh;
  padding: 0 50px 25px 50px;
  margin-left: -2px;
  display: none;
  background-color: #fff;
  box-sizing: border-box;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item .sub-menu::before {
  content: " ";
  left: 20px;
  top: 0;
  width: 1px;
  background: #f2f2f2;
  float: left;
  position: absolute;
  height: 100%;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item .sub-menu .sub-menu-item {
  width: 33.33%;
  box-sizing: border-box;
  padding: 0 16px;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item .et-menu-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .panel-menu-ul .panel-menu-item .et-menu-toggle {
    justify-content: flex-end;
  }
}

.fullscreen-menu .panel-menu-ul .panel-menu-item .et-menu-toggle svg {
  width: 12px;
  height: 12px;
}

.fullscreen-menu .panel-menu-ul .panel-menu-item .et-menu-toggle path {
  fill: #777;
}

.fullscreen-menu .panel-menu-extras {
  width: 25%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 20px;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .panel-menu-extras {
    width: 100%;
  }
}

.fullscreen-menu .panel-menu-extras .et-currency-select {
  border: none !important;
  width: inherit;
  outline: none;
}

.fullscreen-menu .social-media-warp {
  display: flex;
}

.fullscreen-menu .social-media-warp .social-media-item {
  display: inline-block;
}

.fullscreen-menu .panel-menu-mobile {
  flex: 1;
  display: flex;
  flex-direction: column;
  display: none;
}

@media screen and (max-width: 767px) {
  .fullscreen-menu .panel-menu-mobile {
    display: flex;
  }
}

.fullscreen-menu .panel-menu-mobile .panel-navigation {
  flex: 1;
  color: var(--font-color);
  display: inline-block;
  position: relative;
  font-size: 14px;
  padding: 4px 0;
}

.fullscreen-menu .panel-menu-mobile .only-warp {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.fullscreen-menu .panel-menu-mobile .only-ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  transition: all 0.45s ease-in-out;
}

.fullscreen-menu .panel-menu-mobile .only-ul-show {
  display: block;
}

.fullscreen-menu .panel-menu-mobile .only-ul-left100 {
  left: 100%;
}

.fullscreen-menu .panel-menu-mobile .panel-menu-parent {
  justify-content: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fullscreen-menu .panel-menu-mobile .panel-menu-parent svg {
  width: 14px;
  height: 14px;
}

.fullscreen-menu .panel-menu-mobile .panel-menu-parent span {
  font-weight: bold;
  font-size: 15px;
  list-style: 1;
}

{% endstylesheet %}
{% if section  and section.type == "header" %}{% assign section = section %}{% else %}{% assign section = theme_config.global.sections.header %}{% endif %}
{% assign router = section.router | default : routes.current_route  %}
{% if section.settings.is_index_board and router == "index/index" and section.settings.is_board %}
{% assign showBoard = true %}
{% elsif section.settings.is_index_board == false and section.settings.is_board %}
{% assign showBoard = true %}
{% else %}
{% assign showBoard = false %}
{% endif %}
{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}


<div class="page_container" style="--font-color:{{section.settings.menu_color}};--bg-color:{{section.settings.nav_bg}}">
    {% if showBoard %}
    <a class="top-notice" href="{{ section.settings.board_link.url }}" style="background-color:{{ section.settings.board_bg }};color: {{ section.settings.board_font }};">{{ section.settings.board_text }}</a>
    {% endif %}
    <div class="header_box" style="background-color:{{ section.settings.nav_bg }}">
        <div class="header-nav">
            <div class="header-nav-container">

                <div class="header-nav-left">

                    <div class="header-nav-icon click-menu padding-right-18">
                        {% include 'icon_goya_menu' %}
                    </div>

                    {% if section.settings.is_search %}
                    <div class="header-nav-icon click-search model-hide">
                        {% include 'icon_goya_search' %}
                    </div>
                    {% endif %}
                </div>
                <div class="header-nav-content">
                    <div class="header-menu">
                        {% if header_nav.size > 0 %} 
                        <div class="logo-left">
                        {% for item in header_nav.nav_item %}
                        {%- assign average = header_nav.nav_item.size | divided_by : 2  -%}
                        {% if forloop.index <= average %}
                            <div class="header-nav-item model-hide">
                            {% include "nav_a", nav : item, class:"navigation" %}
                            {% if item.children %}
                            <div class="parent-level-ul">
                                <ul class="sub-menu">
                                    {% for el in item.children %}
                                    <li class="sub-menu-item">
                                        {% include "nav_a", nav : el, class:"navigation nav-child-a" %}
                                        {% if el.children %}
                                        <ul class="secondary-ul">
                                            {% for ddItem in el.children %}
                                            <li class="secondary-ul-item">
                                            {% include "nav_a", nav : ddItem, class:"navigation nav-child-el" %}
                                            </li>
                                            {% endfor %}
                                        </ul>
                                        {% endif %}

                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endfor %} 
                        </div>

                        <div class="header-nav-item">
                            <a class="header-logo" href="/">
                                {% if section.settings.logo_pic.src != '' %}
                                <img src="{{ section.settings.logo_pic.src  | image_url:'600x600' }}" alt="{{ section.settings.logo_pic.alt}}" />
                                {% else %} {{ storeConfig.name }} {% endif %}
                            </a>
                        </div>
                        <div class="logo-right">
                        {% for item in header_nav.nav_item %}
                        {%- assign average = header_nav.nav_item.size | divided_by : 2  -%}

                        {% if forloop.index > average %}
                            <div class="header-nav-item model-hide">
                            {% include "nav_a", nav : item, class:"navigation" %}
                            {% if item.children %}
                            <div class="parent-level-ul">
                                <ul class="sub-menu">
                                    {% for el in item.children %}
                                    <li class="sub-menu-item">
                                        {% include "nav_a", nav : el, class:"navigation nav-child-a" %}
                                        {% if el.children %}
                                        <ul class="secondary-ul">
                                            {% for ddItem in el.children %}
                                            <li>
                                            {% include "nav_a", nav : ddItem, class:"navigation" %}
                                            </li>
                                            {% endfor %}
                                        </ul>
                                        {% endif %}

                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endfor %} 
                        </div>

                        
                        {% else %}
                        <div class="logo-left">

                        <div class="header-nav-item model-hide">
                
                            <a href="/" class="navigation">Home</a>
                        </div>
                        <div class="header-nav-item model-hide">
                            <a href="/collections" class="navigation">Collections</a>
                        </div>
                        </div>

                        <div class="header-nav-item">
                            <a class="header-logo" href="/">
                                {% if section.settings.logo_pic.src != '' %}
                                <img src="{{ section.settings.logo_pic.src  | image_url:'600x600' }}" alt="{{ section.settings.logo_pic.src}}" />
                                {% else %} {{ storeConfig.name }} {% endif %}
                            </a>
                        </div>
                        <div class="logo-right">
                        <div class="header-nav-item model-hide">
                            <a href="/search" class="navigation">Search</a>
                        </div>
                        <div class="header-nav-item model-hide">
                            <a href="/collections/all" class="navigation">Product</a>
                        </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <div class="header-nav-right">
                    {% if section.settings.is_member %}
                    <a class="header-nav-icon member-icon model-hide" href="/account/login">
                        {% include 'icon_goya_user' %}
                    </a>
                    {% endif %}
                    <a class="header-nav-icon padding-left-18 cart-box" {% if page_ca !="cart_list" %} id="cart_icon" {% endif %} href="javascript:void(0);">
                        {% include "icon_goya_cart" %}
                        <span id="cart_number"></span>
                    </a>
                </div>
            </div>
        </div>


    </div>

    <!-- 搜索 -->
    <div class="pop_search-mask"></div> 
    <div class="pop_search ">

            <div class="pop_search-content">
                <div class="container-wrapper">
                <div class="pop_search-header">
                    {% include 'del_btn' , class:"click-search" %}
                </div>
                <div class="header-nav-search">
                    
                    <form class="search-input control-all-search" action="/search" onsubmit="return oemsaasSearch('.pop-input')">
                        <button style="background:none;cursor: pointer;" type="submit">
                        {% include 'icon_goya_search' %}
                        </button>
                        <input type="text"  name="q" class="search-mobile-input pop-input padding-left-12" placeholder="{{ section.settings.search_placeholder }}" />
                    </form>
                </div>
            </div>
            </div>
            
    </div>

    <!-- 菜单 -->
    <div class="fullscreen-menu animation-left">
        <div class="bar-light">
            {% include 'del_btn', class:"click-menu" %}
            {% if section.settings.is_member %}
            <a href="/account/login" class="padding-top-18 user-icon">
                {% include 'icon_goya_user' %}
            </a>
            {% endif %}
        </div>
        <div class="side-panel-content">
            <div class="side-panel-menu">
                <ul class="panel-menu-ul model-hide">
                    {% if header_nav.size > 0 %} 
                    {% for item in header_nav.nav_item %}
                    <li class="panel-menu-item">
                        {% include "nav_a", nav : item, class:"navigation panel-navigation" %}
                        <div class="et-menu-toggle">
                            {% include 'icon_goya_right' %}
                        </div>
                        
                        {% if item.children %}
                        <ul class="sub-menu">
                            {% for el in item.children %}
                            <li class="sub-menu-item">
                                {% include "nav_a", nav : el, class:"navigation font-weight" %}

                                {% if el.children %}
                                <ul class="padding-top-16">
                                {% for sel in el.children %}
                                <li class="padding-bottom-6">{% include "nav_a", nav : sel, class:"navigation" %}</li>
                                {% endfor %}
                                </ul>
                                {% endif %}

                            </li>
                            {% endfor %}

                        </ul>
                        {% endif %}


                    </li>
                    {% endfor %}
                    {% else %}
                    <li class="panel-menu-item">
                        <a class="navigation panel-navigation" href="/">Home</a>
                    </li>
                    <li class="panel-menu-item">
                        <a class="navigation panel-navigation" href="/collections">Collections</a>
                    </li>
                    <li class="panel-menu-item">
                        <a class="navigation panel-navigation" href="/search">Search</a>
                    </li>
                    <li class="panel-menu-item">
                        <a class="navigation panel-navigation" href="/collections/all">Product</a>
                    </li>
                    {% endif %}
                </ul>

                <div class="panel-menu-mobile">
                    <div class="mobile-search-input">
                        {% if section.settings.is_search %}
                        <form class="search-input control-all-search" action="/search" onsubmit="return oemsaasSearch('.mobile-input')">
                            <button style="background:none;cursor: pointer;" type="submit">
                                {% include 'icon_goya_search' %}
                            </button>
                            <input type="text" name="q" class="search-mobile-input mobile-input padding-left-12" placeholder="{{ section.settings.search_placeholder }}" />
                        </form>
                        {% endif %}
                    </div>
                    <div class="only-warp">
                        <ul class="panel-menu-ul only-warp-menu only-ul">
                            {% if header_nav.size > 0 %} 

                            {% for item in header_nav.nav_item %}
                            <li class="panel-menu-item only-ul-li">
                                {% include "nav_a", nav : item, class:" panel-navigation" %}
                                
                                {% if item.children %}
                                <div class="et-menu-toggle">
                                    {% include 'icon_goya_right' %}
                                </div>
                                    <ul class="panel-menu-ul only-ul only-ul-left100">
                                        <li class="panel-menu-item panel-menu-parent">
                                            {% include 'icon_goya_left' %}
                                            <span class="padding-left-14">{{item.nav_item_name}}</span>
                                        </li>
                                        {% for el in item.children %}
                                        <li class="panel-menu-item only-ul-li">
                                            {% include "nav_a", nav : el, class:" panel-navigation" %}
                                            
                                            {% if el.children %}
                                            <div class="et-menu-toggle">
                                                {% include 'icon_goya_right' %}
                                            </div>
                                            <ul class="panel-menu-ul only-ul only-ul-left100">
                                                <li class="panel-menu-item panel-menu-parent">
                                                    {% include 'icon_goya_left' %}
                                                    <span class="padding-left-14">{{el.nav_item_name}}</span>
                                                </li>
                                                {% for sel in el.children %}
                                                <li class="panel-menu-item only-ul-li">
                                                    {% include "nav_a", nav : sel, class:" panel-navigation" %}
                                                </li>
                                                {% endfor %} 
                                            </ul>
                                            {% endif %}
                                        </li>
                                        {% endfor %} 
                                    </ul>
                                {% endif %}
                            </li>
                            {% endfor %}
                            {% else %}
                            <li class="panel-menu-item">
                                <a class=" panel-navigation" href="/">Home</a>
                            </li>
                            <li class="panel-menu-item">
                                <a class=" panel-navigation" href="/collections">Collections</a>
                            </li>
                            <li class="panel-menu-item">
                                <a class=" panel-navigation" href="/search">Search</a>
                            </li>
                            <li class="panel-menu-item">
                                <a class=" panel-navigation" href="/collections/all">Product</a>
                            </li>                            
                            {% endif %}
                        </ul>
                    </div>
                    
                </div>

                <div class="panel-menu-extras">
                    {% if section.settings.is_currency %}
                    {% include 'currency',color:"#333" %}
                    {% endif %}
                    {% include 'share_link', section:section.settings %}
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
(function(){function switchClass(dom, name) {
    if (dom.hasClass(name)) {
        dom.removeClass(name);
    } else {
        dom.addClass(name);
    }
}

const maskDOM = $(".pop_search-mask");
const searchDOM = $(".pop_search");
const menuDOM = $(".fullscreen-menu");

// 显示搜索按钮
$(".click-search").click(function (e) {
    switchClass(maskDOM, "mask-show");
    switchClass(searchDOM, "pop_search-show");
});

//显示菜单
$(".click-menu").click(function (e) {
    switchClass(menuDOM, "animation-left-show");
});

// 移动端菜单切换
let setp = 0;
let onlyWarpDOM = $(".only-warp");
let onlyMenuDOM = $(".only-warp-menu");

$(".only-ul-li").click(function (e) {
    e.stopPropagation();
    let onlyWarpWidth = onlyWarpDOM.width();
    console.log($(this).children(".panel-menu-ul"));
    if ($(this).children(".panel-menu-ul").length) {
        setp++;
        e.preventDefault();
        onlyMenuDOM.css({ left: -onlyWarpWidth * setp });
        $(this).children(".panel-menu-ul ").addClass("only-ul-show");
    }
});
$(".panel-menu-parent").click(function (e) {
    e.stopPropagation();
    e.preventDefault();
    let onlyWarpWidth = onlyWarpDOM.width();
    setp--;
    
    $(this).parent().removeClass("only-ul-show");
    onlyMenuDOM.css({ left: -onlyWarpWidth * setp });
});

// 购物车逻辑
$("#cart_icon").click(function () {
    $(".minicart").addClass("minicart_on");
    const html = $(".minicart").find(".minicart_mid").html();
    if (!html) {
        miniCart();
    }
});

addCartNum();
})()
</script>
{% schema %}
{
	"tag": "",
	"class": "header",
	"is_global": true,
	"name": {
		"zh_CN": "头部"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单导航设置1111"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "公告栏"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "开启公告栏"
			},
			"id": "is_board",
			"default": true
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "仅首页显示公告栏"
			},
			"id": "is_index_board"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "公告栏文案"
			},
			"id": "board_text",
			"default": "We Free Shipping Worldwide."
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "公告栏链接"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "board_link"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "顶部LOGO与图片"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "logo图片"
			},
			"id": "logo_pic",
			"default": "https://cn01-imgcdn.oemsaas.com/62137/2020/09/12/7/5/756503d9b6b3a77f.png"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "个人中心"
			},
			"id": "is_member",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "搜索"
			},
			"id": "is_search",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "货币切换"
			},
			"id": "is_currency",
			"default": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "搜索底纹"
			},
			"id": "search_placeholder",
			"default": "Search"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏字体"
			},
			"id": "board_font",
			"default": "#333"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏背景"
			},
			"id": "board_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "导航栏背景"
			},
			"id": "nav_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "菜单项颜色"
			},
			"id": "menu_color",
			"default": "#1d1f21"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "SNS账号"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Facebook"
			},
			"id": "is_facebook"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Twitter"
			},
			"id": "is_twitter"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Pinterest"
			},
			"id": "is_pinterest"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Instagram"
			},
			"id": "is_instagram"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Snapchat"
			},
			"id": "is_snapchat"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tiktok"
			},
			"id": "is_tiktok"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tumblr"
			},
			"id": "is_tumblr"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Linkedin"
			},
			"id": "is_linkedin"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Youtube"
			},
			"id": "is_youtube"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Vimeo"
			},
			"id": "is_vimeo"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "VK"
			},
			"id": "is_vk"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Whatsapp"
			},
			"id": "is_whatsapp"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"nav": {
				"id": "",
				"title": ""
			},
			"is_board": true,
			"is_index_board": true,
			"board_text": "We Free Shipping Worldwide.",
			"board_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"logo_pic": {
				"src": "",
				"alt": ""
			},
			"is_member": true,
			"is_search": true,
			"is_currency": true,
			"board_font": "#ffffff",
			"board_bg": "#e97a7e",
			"nav_bg": "#ffffff",
			"search_placeholder": "Search",
			"menu_color": "#444444",
			"is_facebook": true,
			"is_twitter": true,
			"is_pinterest": true,
			"is_instagram": false,
			"is_snapchat": false,
			"is_tiktok": false,
			"is_tumblr": false,
			"is_linkedin": false,
			"is_youtube": false,
			"is_vimeo": false,
			"is_vk": false,
			"is_whatsapp": false
		},
		"blocks": []
	}
}
{% endschema %}